import React, { FC } from 'react'
import styles from './index.module.scss'
import { Button, Space, Divider, Tag, Popconfirm, message } from 'antd'
import {
    EditOutlined,
    LineChartOutlined,
    StarOutlined,
    CopyOutlined,
    DeleteOutlined
} from '@ant-design/icons'
import { useNavigate, Link } from 'react-router-dom'
type PropsType = {
    _id: string,
    title: string,
    isStar: boolean,
    isPublished: boolean,
    answerCount: number,
    createdAt: string
}
const QuestionCard: FC<PropsType> = (props: PropsType) => {
    const { _id, title, isPublished, answerCount, createdAt, isStar } = props
    const nav = useNavigate()
    const copyCliHandle = () => {
        message.success('复制成功')
    }
    return (
        <>
            <div className={styles.container}>
                <div className={styles.title}>
                    <div className={styles.left}>
                        <Link to={isPublished ? `/question/stat/${_id}` : `/question/edit/${_id}`}>
                            <Space>
                                {isStar && <StarOutlined style={{ color: 'red' }} />}
                                {title}
                            </Space>
                        </Link>
                    </div>
                    <div className={styles.right}>
                        <Space>
                            {isPublished ? <Tag color='processing'>已发布</Tag> : <Tag>未发布</Tag>}
                            <span>答案：{answerCount}</span>
                            <span>{createdAt}</span>
                        </Space>
                    </div>
                </div>
                <Divider style={{ margin: '12px 0' }} />
                <div className={styles['btn-container']}>
                    <div className={styles.left}>
                        <Space>
                            <Button
                                type='text'
                                icon={<EditOutlined />}
                                onClick={() => nav(`/question/edit/${_id}`)}
                                size='small'
                            >编辑问卷</Button>
                            <Button
                                type='text'
                                icon={<LineChartOutlined />}
                                disabled={!isPublished ? true : false}
                                onClick={() => nav(`/question/stat/${_id}`)}
                                size='small'
                            >数据统计</Button>
                        </Space>
                    </div>
                    <div className={styles.right}>
                        <Space>
                            <Button type='text' icon={<StarOutlined />} size='small'>
                                {isStar ? '取消标星' : '标星'}
                            </Button>
                            <Popconfirm
                                title="复制"
                                description="确定要复制该问卷吗?"
                                okText="确定"
                                cancelText="取消"
                                onConfirm={copyCliHandle}
                            >
                                <Button type='text' icon={<CopyOutlined />} size='small'>复制</Button>
                            </Popconfirm>
                            <Button type='text' icon={<DeleteOutlined />} size='small'>删除</Button>
                        </Space>
                    </div>
                </div>
            </div>
        </>
    )
}

export default QuestionCard;